<template>
  <view
    class="c-text-inside"
    @click="$emit('click', $event)"
    :class="ggclass"
    :style="{
      color: colors,
      fontSize: fontSizes,
      width,
      maxWidth,
      fontWeight,
      '-webkit-line-clamp': row,
    }"
  >
    <slot>{{ content }}</slot>
  </view>
</template>

<script setup lang="ts">
	// import {
	// 	mapState
	// } from 'vuex'
import {defineProps,computed, getCurrentInstance} from 'vue'
const {proxy} = getCurrentInstance() as any;
const props = withDefaults(
	defineProps<{
		ggclass:string,
		color:string,
		fontSize:string,
		row:number|string,
		width:string,
		maxWidth:string,
		fontWeight:string,
		content:string|number
	}>(),
	{
		ggclass:"",
		color:"",
		fontSize:"28rpx",
		row:0,
		width:"",
		maxWidth:"100%",
		fontWeight:"",
		content:"",
	}
	)
		// props: {
		// 	ggclass: {
		// 		type: String,
		// 		default: ''
		// 	},
		// 	color: {
		// 		type: String,
		// 		default: ''
		// 	},
		// 	fontSize: {
		// 		type: String,
		// 		default: '28rpx'
		// 	},
		// 	row: {
		// 		type: [Number, String],
		// 		default: ''
		// 	},
		// 	width: {
		// 		type: String,
		// 		default: ''
		// 	},
		// 	maxWidth: {
		// 		type: String,
		// 		default: '100%'
		// 	},
		// 	fontWeight: {
		// 		type: [String],
		// 		default: ''
		// 	},
		// 	content: {
		// 		type: [String, Number],
		// 		default: ''
		// 	}
		// },

			const fontSizes = computed(() => {
				let num = parseInt(props.fontSize)
				// 判断除了中文 其他语言小两号字体
				// if (this.lanIndex) {
				// 	num -= 2 * 2
				// }
				return `${num}rpx`
			})
			const colors = computed(() => {
				if (props.color) return proxy.$color[props.color] || props.color
				return proxy.$color.theme.textColor
			})
</script>

<style scoped>
.c-text-inside {
  word-break: break-all;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>